<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList">
        <van-image
            :src="item.imageUrl"
            style="border-radius: 10px; overflow: hidden;"
          />
      </van-swipe-item>
    </van-swipe>
    <!-- 推荐歌单 -->
    <div class="recom">
      <div class="title">推荐歌单</div>
          <div class="recom-list">
            <div class="list" >
              <div class="pic"  
              v-for="item in recomList" 
              :key="item.id" 
              @click="gotoSongList(item.id)">
              <van-image

              :src="item.picUrl"
              />
              <p class="song_name">{{ item.name }}</p>
            </div>
            </div>
          
          </div>
    </div>
    <!-- 1px边框 -->
    <div class="van-hairline--bottom"></div>
    <!-- 最新音乐 -->
    <div class="new-music">
      <div class="title">新歌</div>
      <!-- 上滑进入 -->
      <i class="tip">
        <transition name="van-slide-left">
          <div v-show="visible">可以向左滑动屏幕哦</div>
        </transition>
      </i>
      <van-swipe :loop="false" :show-indicators="false">
        <van-swipe-item v-for="(arrItem,i) in page" :key="i">
          <van-cell  is-link  v-for="item in arrItem" :key="item.id">
        <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <van-image
              width="1.33333rem"
              height="1.33333rem"
              :src="item.picUrl"
              />
              <div class="text">
                <span class="custom-title">{{ item.name }} </span>
                <span class="author">- {{ item.song.artists[0].name }}</span>
              </div>
            </template>
            <template #right-icon>
              <van-icon name="play" class="iconPlay" @click="gotoPlay(item.id)"/>
            </template>
          </van-cell>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
  
import { recommendMusicApi } from '@/api';
  // 获取轮播图
import { bannerListsApi } from '@/api'
  // 获取最新音乐
import { newMusicApi } from '@/api';
  // 播放音乐
export default {
  data() {
    return {
      recomList: [],
      // 轮播图数据
      bannerList: [],
      // 最新音乐数据
      newMusicList: [],

      // 最新歌页数
      page: [],
      visible:true
    }
  },
 async created() {
    const { data } = await recommendMusicApi({limit:6})
   this.recomList = data.result

   const { data:{banners} } = await bannerListsApi({type:1})
   this.bannerList = banners

   const {data:{result} } = await newMusicApi({limit:20})
   this.newMusicList = result
  //  this.newListOne =  result.slice(0,5)
  //  this.newListTwo = result.slice(0, 5)
   this.page.push(
    result.slice(0, 5),
    result.slice(5,10),
    result.slice(10,15),
    result.slice(15,20)
   )
  },
  mounted() {
    setTimeout(() => {
      this.visible = false
    }, 4000);
  },
  methods: {
    gotoPlay(id) {
      this.$router.push({
        path: '/play',
        query: {
        id
       }
      })
    },
    gotoSongList(id) {
      this.$router.push({
        path: '/songlist',
        query: {
          id
        }
      })
    }
  }
};
</script>

<style scoped lang="less">
/* 标题 */
.title {
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  color: #000;
  font-weight:800;
  font-size: .4rem;
}
/* 推荐歌单 - 歌名 */
.song_name {
  font-size: 0.346667rem;
  padding: 0 0.08rem;
  margin-bottom: 0.266667rem;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.recom{
  border-radius: .2667rem;
  background-color: #fff;
  .recom-list{
   display: flex;
  white-space: nowrap;
  overflow:scroll;
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.list {
    display: flex;
  }
    .pic {
      p {
        white-space: pre-wrap;
        width: 2.6667rem;
        height: .90rem;
      }
      .van-image{
        width: 2.6667rem;
        height: 2.6667rem;
        border-radius: 10px; 
        overflow: hidden;
        margin-right: 15px;
      }
    }
  }
}
.new-music {
  position: relative;
  margin-top: .2667rem;
  background-color: #fff;
  border-radius: .2667rem;
  .van-swipe{
    border-radius: .2667rem;
  }
  .tip {
    position: absolute;
    top: .1333rem;
    right: 1.1733rem;
    z-index: 9999;
    font-size: .4rem;
    color: #2e95f5;
  }
  span {
    color: #272c31;
    font-weight: 800;
  }
  .author{
    color: #ccc;
    font-size: .32rem;
    font-weight: 400;
  }
  .van-image{
    border-radius: .2667rem;
    overflow: hidden;
  }
  .van-cell__title{
    display: flex;
  }
  .text{
    transform: translateY(.4rem) translateX(10px);
  }
  .iconPlay{
    position: absolute;
    top: .6933rem;
    left: .8rem;
    font-size: .5333rem;
    color: #fff;
  }
}
</style>